<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Promise Animation</title>
  <style>
    .ball {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    
    .ball1 {
      background: red;
    }
    
    .ball2 {
      background: green;
    }
    
    .ball3 {
      background: purple;
    }
  </style>
</head>

<body>
  <div class=" ball ball1">

  </div>
  <div class="ball2 ball">

  </div>
  <div class="ball3 ball"></div>
</body>
<script>
  var ball1 = document.querySelectorAll('.ball1')[0]
  var ball2 = document.querySelectorAll('.ball2')[0]
  var ball3 = document.querySelectorAll('.ball3')[0]

  var PromiseAnimate = function(ball, distance) {
    return new Promise((resolve, reject) => {
      function _annimate(ball, distance) {
        setTimeout(function() {
          var marginLeft = ball.style.marginLeft.replace('px', '')
          if (marginLeft == distance) {
            resolve()
            return
          } else {
            if (marginLeft < distance) {
              marginLeft++
            } else {
              marginLeft--
            }
            ball.style.marginLeft = marginLeft + 'px'
            _annimate(ball, distance)
          }
        }, 50)
      }
      _annimate(ball, distance)
    })
  }
  PromiseAnimate(ball1, 100).then(() => {
    return PromiseAnimate(ball2, 150)
  }).then(() => {
    return PromiseAnimate(ball3, 200)
  }).then(() => {
    return PromiseAnimate(ball3, 10)
  }).then(() => {
    return PromiseAnimate(ball2, 10)
  }).then(() => {
    return PromiseAnimate(ball1, 10)
  })
</script>

</html>